import { createUseStyles } from "react-jss";

const useStyles = createUseStyles({
  card: {
    height: "100%",
    borderRadius: "4px",
    padding: "16px 0",
    backgroundColor: "#fff",
    boxShadow: "0px 0px 4px 0px #d5dbe2",
    display: "flex",
    flexDirection: "column",
    transition: "all linear 0.2s",
    fontSize: (props: { fontSize: number }) => props.fontSize,
  },

  title: {
    flexShrink: 0,
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    lineHeight: 1,
    padding: "0 16px",
  },
  titleLeft: {
    display: "flex",
    alignItems: "center",
    gap: "8px",
  },
  operation: {
    display: "flex",
    alignItems: "center",
    gap: "8px",
    "& span": {
      fontWeight: "400",
      color: "#037aff",
      cursor: "pointer",
    },
  },
  mainTitle: {
    color: "#333",
    fontWeight: "500",
  },

  icon: {
    fontSize: "10px",
    display: "inline-flex",
    cursor: "pointer",
  },

  arrowRight: {
    fontSize: "10px",
    transform: "rotate(-90deg)",
    transition: "all linear 0.2s",
    display: "inline-flex",
  },

  arrowDown: {
    transform: "rotate(0)",
  },
  content: {
    height: "100%",
    flexGrow: 1,
    padding: "0 16px",
    transition: "all linear 0.2s",
    overflow: "auto",
  },

  collapse: {
    opacity: 0,
    paddingTop: 0,
  },
  editIcon: {
    fontSize: "10px",
    color: "#037aff",
    display: "inline-flex",
    cursor: "pointer",
    "&:hover": {
      color: "#0063b3",
      transform: "scale(1.1)",
      transformOrigin: "center",
    },
  },
});

export { useStyles };
